<template>
  <!-- 添加或修改公告对话框 -->
  <el-dialog
    :title="!dataForm.id ? '添加日志' : '修改日志'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="780px"
    append-to-body>
    <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="80px">
      <el-row>
        <el-form-item label="标题" prop="title">
          <el-input v-model="dataForm.noticeTitle" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="dataForm.noticeType" placeholder="请选择类型">
            <el-option
              v-for="option in noticeTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="0">TODO</el-radio>
              <el-radio :label="1">DONE</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容">
            <editor v-model="dataForm.noticeContent" :min-height="192"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
      <el-button @click="cancel()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import editor from '../../../components/editor/editor'

export default {
  components: {
    editor
  },
  name: 'notice-add-or-update',
  data () {
    return {
      visible: false,
      // 表单参数
      dataForm: {
        id: 0,
        noticeTitle: '',
        noticeType: '',
        status: 0,
        noticeContent: ''
      },
      // 从notice获取数据
      dataFromNotice: {},
      // 公告类型
      noticeTypeOptions: [{
        value: 1,
        label: '通知'
      }, {
        value: 2,
        label: '公告'
      }, {
        value: 3,
        label: '日志'
      }],
      // 表单校验
      rules: {
        noticeTitle: [
          {required: true, message: '公告标题不能为空', trigger: 'focus'}
        ],
        noticeType: [
          {required: true, message: '公告类型不能为空', trigger: 'focus'}
        ]
      },
    }
  },
  methods: {
    init (id) {
      // 有id为修改，没有id则为添加
      this.dataForm.id = id || 0
      this.visible = true
      // 更新
      if (this.dataForm.id) {
        this.dataForm.noticeTitle = this.dataFromNotice.title
        this.dataForm.noticeType = this.dataFromNotice.type
        this.dataForm.status = this.dataFromNotice.status
        this.dataForm.noticeContent = this.dataFromNotice.content
      } else {
        // 添加，清空表单
        this.dataForm.noticeTitle = ''
        this.dataForm.noticeType = ''
        this.dataForm.status = 0
        this.dataForm.noticeContent = ''
      }
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sys/notice/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'title': this.dataForm.noticeTitle,
              'type': this.dataForm.noticeType,
              'status': this.dataForm.status,
              'content': this.dataForm.noticeContent,
              'createBy': this.$store.state.user.name
            })
          }).then(({data}) => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 取消按钮
    cancel () {
      this.reset()
      this.visible = false
    },
    // 表单重置
    reset () {
      this.dataForm = {
        noticeId: '',
        noticeTitle: '',
        noticeType: '',
        noticeContent: '',
        status: '0'
      }
    },
  }
}
</script>

<style scoped>

</style>
